<template>
	<view class="container">
		<view class="form-section">
			<text class="section-title">{{ isEditMode ? '编辑规则内容' : '裁判规则上传' }}</text>
			<text class="section-desc">{{ isEditMode ? '请修改以下信息，更新裁判规则内容' : '请填写以下信息，上传裁判规则内容' }}</text>
			
			<view class="form-item">
				<text class="form-label required">一级规则标签</text>
				<view class="picker-container">
					<input class="form-input disabled-input" type="text" v-model="formData.category" disabled placeholder="选择一级规则标签" />
					<picker class="form-picker" :value="categoryIndex" :range="categoryOptions" @change="bindCategoryChange">
						<view class="picker-arrow">▼</view>
					</picker>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label required">二级规则标签</text>
				<view class="picker-container">
					<input class="form-input" type="text" v-model="formData.subcategory" placeholder="请输入或选择二级规则标签" />
					<picker class="form-picker" :value="subcategoryIndex" :range="subcategoryOptions" @change="bindSubcategoryChange" :disabled="!subcategoryOptions.length">
						<view class="picker-arrow">▼</view>
					</picker>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label required">规则标题</text>
				<input class="form-input" type="text" v-model="formData.title" placeholder="请输入规则标题" />
			</view>
			
			<view class="form-item">
				<text class="form-label required">规则内容</text>
				<!-- 富文本编辑器 -->
				<view class="editor-container" :class="{ 'fullscreen': isFullScreen }">
					<!-- 编辑器工具栏 -->
					<view class="editor-toolbar">
						<!-- 加粗按钮 -->
						<view class="toolbar-btn" @click="formatText('bold')" :class="{ active: formats.bold }">
							<text class="toolbar-icon">B</text>
						</view>
						
						<!-- 字体大小选择 -->
						<view class="toolbar-dropdown">
							<view class="toolbar-btn dropdown-toggle" @click="showFontSizeSelector = !showFontSizeSelector">
								<text class="toolbar-icon">A</text>
								<text class="dropdown-arrow">▼</text>
							</view>
							<view class="dropdown-menu" v-if="showFontSizeSelector">
								<view class="dropdown-item" @click="formatText('fontSize', '14px'); showFontSizeSelector = false">
									<text class="dropdown-text">小</text>
								</view>
								<view class="dropdown-item" @click="formatText('fontSize', '16px'); showFontSizeSelector = false">
									<text class="dropdown-text">中</text>
								</view>
								<view class="dropdown-item" @click="formatText('fontSize', '18px'); showFontSizeSelector = false">
									<text class="dropdown-text">大</text>
								</view>
							</view>
						</view>
						
						<!-- 文字颜色选择 -->
						<view class="toolbar-dropdown">
							<view class="toolbar-btn dropdown-toggle" @click="showColorSelector = !showColorSelector">
								<view class="color-icon" :style="{ backgroundColor: currentColor || '#000000' }"></view>
								<text class="dropdown-arrow">▼</text>
							</view>
							<view class="dropdown-menu color-menu" v-if="showColorSelector">
								<view class="color-grid">
									<view 
										class="color-item" 
										v-for="(color, index) in colorList" :key="index"
										:style="{backgroundColor: color}"
										@click="formatText('color', color); currentColor = color; showColorSelector = false">
									</view>
								</view>
							</view>
						</view>
						
						<!-- 对齐方式 - 只保留4种对齐方式 -->
						<view class="toolbar-btn" @click="formatText('align', 'left')" :class="{ active: formats.align === 'left' }">
							<view class="align-icon">
								<view class="align-line full-line"></view>
								<view class="align-line left-line"></view>
								<view class="align-line full-line"></view>
							</view>
						</view>
						
						<view class="toolbar-btn" @click="formatText('align', 'center')" :class="{ active: formats.align === 'center' }">
							<view class="align-icon">
								<view class="align-line full-line"></view>
								<view class="align-line center-line"></view>
								<view class="align-line full-line"></view>
							</view>
						</view>
						
						<view class="toolbar-btn" @click="formatText('align', 'right')" :class="{ active: formats.align === 'right' }">
							<view class="align-icon">
								<view class="align-line full-line"></view>
								<view class="align-line right-line"></view>
								<view class="align-line full-line"></view>
							</view>
						</view>
						
						<view class="toolbar-btn" @click="formatText('align', 'justify')" :class="{ active: formats.align === 'justify' }">
							<view class="align-icon">
								<view class="align-line full-line"></view>
								<view class="align-line full-line"></view>
								<view class="align-line full-line"></view>
							</view>
						</view>
						
						<!-- 项目符号 -->
						<view class="toolbar-btn" @click="formatText('list', 'bullet')" :class="{ active: formats.list === 'bullet' }">
							<view class="bullet-icon">
								<view class="bullet-item">
									<view class="bullet-dot"></view>
									<view class="bullet-line"></view>
								</view>
								<view class="bullet-item">
									<view class="bullet-dot"></view>
									<view class="bullet-line"></view>
								</view>
								<view class="bullet-item">
									<view class="bullet-dot"></view>
									<view class="bullet-line"></view>
								</view>
							</view>
						</view>
						
						<!-- 图片插入按钮 -->
						<view class="toolbar-btn" @click="insertImage">
							<text class="toolbar-icon">🖼️</text>
						</view>
						
						<!-- 全屏按钮 -->
						<view class="toolbar-btn fullscreen-btn" @click="openFullscreenEditor">
							<text class="fullscreen-text">全屏</text>
						</view>
					</view>
					
					<!-- 编辑器主体 -->
					<editor 
						id="editor" 
						class="editor" 
						:placeholder="'请输入规则详细内容（支持丰富的文字排版和图片）'" 
						@ready="onEditorReady" 
						@input="onEditorInput"
						:show-img-resize="true"
						:show-img-toolbar="true"
						:show-img-size="true"
						:read-only="false"
					></editor>
				</view>
			</view>
			
			<!-- 只保留文档上传，删除图片上传 -->
			<view class="form-item">
				<text class="form-label">文档上传</text>
				<view class="upload-container">
					<view class="upload-box" @click="chooseDocument" v-if="!formData.document_url">
						<text class="upload-icon">📄</text>
						<text class="upload-text">点击选择文档</text>
					</view>
					<button 
						class="upload-button" 
						type="primary" 
						@click="chooseDocument" 
						v-if="!formData.document_url">
						选择文档
					</button>
					<view class="upload-preview" v-if="formData.document_url">
						<text class="preview-name">{{ documentName }}</text>
						<view class="preview-actions">
							<button class="preview-btn play-btn" @click="previewDocument">预览</button>
							<button class="preview-btn delete-btn" @click="removeDocument">删除</button>
						</view>
					</view>
					<text class="upload-tip">支持pdf、doc、docx格式，大小不超过10MB</text>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">规则标签</text>
				<input class="form-input" type="text" v-model="formData.tags" placeholder="请输入标签，多个标签用逗号分隔（选填）" />
			</view>
			
			<view class="form-item">
				<text class="form-label required">规则版本</text>
				<input class="form-input" type="text" v-model="formData.version" placeholder="请输入规则版本，如2023/24" />
			</view>
			
			<view class="form-item">
				<text class="form-label required">语言</text>
				<picker class="form-picker" :value="languageIndex" :range="languageOptions" @change="bindLanguageChange">
					<view class="picker-value">
						{{ languageOptions[languageIndex] }}
					</view>
				</picker>
			</view>
		</view>
		
		<view class="submit-section">
			<button class="submit-btn" @click="submitForm" :disabled="submitting">
				{{ submitting ? (isEditMode ? '更新中...' : '提交中...') : (isEditMode ? '更新规则' : '提交') }}
			</button>
		</view>
	</view>
</template>

<script>
	import '../admin/app.css';
	export default {
		data() {
			return {
				ruleId: '', // 添加规则ID字段
				isEditMode: false, // 添加编辑模式标记
				formData: {
					title: '',
					content: '',
					category: '比赛规则',
					subcategory: '',
					tags: '',
					version: '',
					language: 'zh-CN',
					document_url: ''
				},
				categoryOptions: ['比赛规则', '裁判指南', '技术指导', '其他'],
				categoryIndex: 0,
				subcategoryOptions: [],
				subcategoryIndex: 0,
				tertiarycategoryOptions: [],
				tertiarycategoryIndex: 0,
				languageOptions: ['中文(zh-CN)', '英文(en)'],
				languageIndex: 0,
				submitting: false,
				documentName: '',
				uploadStatus: {
					document: false
				},
				// 编辑器相关
				editorCtx: null,  // 编辑器上下文
				formats: {}, // 当前格式
				editorReadyFlag: false, // 编辑器是否准备好
				isFullScreen: false, // 是否全屏模式
				showFontSizeSelector: false, // 显示字体大小选择器
				showColorSelector: false, // 显示颜色选择器
				currentColor: '#000000', // 当前选择的颜色
				// 颜色列表
				colorList: [
					'#000000', '#FF0000', '#00FF00', '#0000FF', 
					'#FFFF00', '#00FFFF', '#FF00FF', '#C0C0C0',
					'#808080', '#800000', '#808000', '#008000', 
					'#800080', '#008080', '#000080', '#FFFFFF'
				]
			}
		},
		onLoad(options) {
			console.log('规则上传页面onLoad, 参数:', options);
			
			// 首先进行权限检查
			this.checkadminPermission();
			
			// 获取并验证ID参数
			let ruleId = '';
			if (options && options.id) {
				ruleId = decodeURIComponent(options.id);
				if (ruleId) {
					this.ruleId = ruleId;
					this.isEditMode = true;
					console.log('编辑模式，规则ID:', this.ruleId);
				}
			}
			
			// 如果是编辑模式，先加载规则数据，在规则数据加载完成后会自动加载分类
			if (this.isEditMode) {
				this.loadRuleData();
			} else {
				// 非编辑模式，直接加载分类数据
				this.loadCategories();
			}
			
			// #ifdef H5
			// 添加窗口大小变化监听
			window.addEventListener('resize', this.handleWindowResize);
			// #endif
			
			// 在微信小程序环境中处理屏幕旋转
			// #ifdef MP-WEIXIN
			try {
				wx.onWindowResize && wx.onWindowResize((res) => {
					console.log('屏幕旋转或窗口大小改变', res);
					if (this.isFullScreen) {
						setTimeout(() => {
							this.adjustEditorPadding();
						}, 300);
					}
				});
			} catch (error) {
				console.error('监听屏幕旋转失败', error);
			}
			// #endif
		},
		onReady() {
			// 添加点击事件监听，用于关闭弹出菜单，但仅在H5环境下
			// #ifdef H5
			document.addEventListener('click', this.handleClickOutside);
			// #endif
		},
		onUnload() {
			// 移除点击事件监听，但仅在H5环境下
			// #ifdef H5
			document.removeEventListener('click', this.handleClickOutside);
			// #endif
			
			// #ifdef H5
			// 移除窗口大小变化监听
			window.removeEventListener('resize', this.handleWindowResize);
			// #endif
		},
		methods: {
			// 检查是否为裁判监督并已认证
			checkadminPermission() {
				try {
					// 尝试获取用户信息
					let userInfo = {};
					const userInfoStr = uni.getStorageSync('userInfo');
					
					// 尝试解析本地存储的用户信息
					if (userInfoStr) {
						try {
							userInfo = JSON.parse(userInfoStr);
						} catch (e) {
							userInfo = userInfoStr; // 如果已经是对象，直接使用
						}
					} else {
						userInfo = {}; // 无数据
					}
					
					// 统一的用户ID获取方式
					let userId = userInfo._id || 
								userInfo.userId || 
								userInfo.id || 
								uni.getStorageSync('userId') || '';
					
					// 统一的token获取方式
					let token = userInfo.token || 
								uni.getStorageSync('user_token') || 
								uni.getStorageSync('uni_id_token') || 
								uni.getStorageSync('token') || '';
					
					// 更新userInfo对象
					userInfo._id = userId;
					userInfo.userId = userId;
					userInfo.token = token;
					
					// 检查是否有有效的用户ID
					const hasValidId = !!userId;
					
					// 检查用户权限
					const isadmin = userInfo.role === 4 || userInfo.role === "4" || userInfo.role === "admin" || userInfo.role === "管理员";
					
					// 检查证书状态 - 扩展判断条件，增加更多可能的有效值
					const credentialStatus = String(userInfo.credential_status || '').toLowerCase();
					const status = String(userInfo.status || '').toLowerCase();
					
					const validStatusValues = ['approved', 'valid', 'verified', 'active', '有效', '通过', '已认证', '已通过'];
					const hasValidCredential = validStatusValues.some(value => 
						credentialStatus.includes(value) || status.includes(value)
					);
					
					// 为调试目的，输出详细的验证信息
					console.log('权限验证信息：', {
						hasValidId,
						isadmin,
						hasValidCredential,
						credentialStatus,
						status,
						userId,
						hasToken: !!token,
						role: userInfo.role,
						userInfo 
					});
					
					// 输出本地存储中的所有键，帮助调试
					const storageInfo = uni.getStorageInfoSync();
					console.log('本地存储中的所有键:', storageInfo.keys);
					
					// 如果不满足条件，显示错误
					if (!hasValidId || !isadmin) {
						console.error('权限验证失败：', {
							hasValidId,
							isadmin,
							hasValidCredential,
							userInfo 
						});
						
						uni.showModal({
							title: '无权访问',
							content: '该页面仅对认证通过的管理员开放，请确保您有管理员权限',
							showCancel: false,
							success: () => {
								uni.navigateBack();
							}
						});
						return false;
					} else {
						// 权限验证通过，存储有效的用户信息
						console.log('权限验证通过，存储有效的用户信息');
						// 确保userInfo被正确存储
						uni.setStorageSync('userInfo', JSON.stringify(userInfo));
						return true;
					}
				} catch (error) {
					console.error('权限检查失败:', error);
					uni.showModal({
						title: '系统错误',
						content: '权限验证失败，请重新登录后再试',
						showCancel: false,
						success: () => {
							uni.navigateBack();
						}
					});
					return false;
				}
			},
			
			// 分类选择变化
			bindCategoryChange(e) {
				this.categoryIndex = e.detail.value;
				this.formData.category = this.categoryOptions[this.categoryIndex];
				
				// 当一级分类变化时，重新加载二级分类
				this.loadSubcategories(this.formData.category);
			},
			
			// 语言选择变化
			bindLanguageChange(e) {
				this.languageIndex = e.detail.value;
				this.formData.language = e.detail.value == 0 ? 'zh-CN' : 'en';
			},
			
			// 编辑器准备就绪
			onEditorReady() {
				// #ifdef MP-WEIXIN || H5
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context;
					this.editorReadyFlag = true;
					console.log('编辑器已准备就绪');
					
					// 如果是编辑模式且已加载了内容，设置编辑器内容
					if (this.isEditMode && this.formData.content) {
						console.log('编辑器就绪后设置内容');
						this._setEditorContent();
					}
					
					// 如果处于全屏模式，调整内边距
					if (this.isFullScreen) {
						this.adjustEditorPadding();
					}
				}).exec();
				// #endif
			},
			
			// 监听编辑器输入
			onEditorInput(e) {
				// 更新content值
				this.formData.content = e.detail.html || '';
			},
			
			// 应用文本格式
			formatText(name, value) {
				if (!this.editorCtx) return;
				this.editorCtx.format(name, value);
			},
			
			// 插入图片到编辑器
			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// 先上传图片
						this.uploadInlineImage(res.tempFilePaths[0]);
					},
					fail: (err) => {
						console.error('选择内联图片失败:', err);
						this.showToast('选择图片失败，请重试');
					}
				});
			},
			
			// 上传内联图片
			uploadInlineImage(filePath) {
				uni.showLoading({ title: '上传图片中...' });
				
				const cloudPath = `inline_images/${new Date().getTime()}_${Math.random().toString(36).substring(2, 10)}.jpg`;
				
				uniCloud.uploadFile({
					filePath: filePath,
					cloudPath: cloudPath,
					success: (res) => {
						const fileID = res.fileID;
						// 将图片插入到编辑器
						this.editorCtx.insertImage({
							src: fileID,
							alt: '规则图片',
							width: '100%',
							success: () => {
								console.log('插入图片成功');
							},
							fail: (err) => {
								console.error('插入图片失败:', err);
								this.showToast('插入图片失败');
							}
						});
					},
					fail: (err) => {
						console.error('上传内联图片失败', err);
						this.showToast('上传图片失败，请重试');
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			
			// 加载规则详情
			loadRuleDetail() {
				return new Promise(async (resolve, reject) => {
					if (!this.ruleId) {
						reject(new Error('规则ID无效'));
						return;
					}
					
					uni.showLoading({
						title: '加载规则数据...'
					});
					
					try {
						const learningService = uniCloud.importObject('learning-service');
						const res = await learningService.getRuleDetail({
							ruleId: this.ruleId,
							isAdmin: true
						});
						
						uni.hideLoading();
						
												if (res && res.code === 0 && res.data) {
							const ruleData = res.data.ruleDetail || {};
							console.log('获取到规则数据:', ruleData);
							
							// 更新表单数据
							this.formData = {
								title: ruleData.title || '',
								content: ruleData.content || '',
								category: ruleData.category || '比赛规则',
								subcategory: ruleData.subcategory || '',
								tags: Array.isArray(ruleData.tags) ? ruleData.tags.join(',') : ruleData.tags || '',
								version: ruleData.version || '',
								language: ruleData.language || 'zh-CN',
								document_url: ruleData.document_url || ''
							};
							
							// 设置索引
							this.categoryIndex = this.categoryOptions.indexOf(this.formData.category);
							if (this.categoryIndex === -1) this.categoryIndex = 0;
							
							// 设置语言索引
							this.languageIndex = this.formData.language === 'en' ? 1 : 0;
							
							// 如果有文档，获取文档名称
							if (this.formData.document_url) {
								this.documentName = this.getFileNameFromUrl(this.formData.document_url);
							}
							
							console.log('已加载规则详情:', this.formData);
							
							// 如果编辑器已准备好，设置内容
							if (this.editorCtx && this.editorReadyFlag) {
								this._setEditorContent();
							} else {
								// 尝试定时检查编辑器是否准备好
								this._checkEditorReady();
							}
							
							resolve();
						} else {
							console.error('获取规则详情失败:', res);
							this.showToast('获取规则详情失败: ' + (res?.message || '未知错误'));
							this.isEditMode = false;
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
							
							reject(new Error('获取规则详情失败'));
						}
					} catch (error) {
						uni.hideLoading();
						console.error('加载规则详情出错:', error);
						this.showToast('系统错误，请稍后再试');
						this.isEditMode = false;
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
						
						reject(error);
					}
				});
			},
			
			// 检查编辑器是否准备好
			_checkEditorReady() {
				// 最多尝试10次，每次间隔300ms
				let tryCount = 0;
				const maxTries = 10;
				
				const checkInterval = setInterval(() => {
					tryCount++;
					console.log(`检查编辑器就绪状态(${tryCount}/${maxTries})...`);
					
					if (this.editorCtx && this.editorReadyFlag) {
						clearInterval(checkInterval);
						this._setEditorContent();
					} else if (tryCount >= maxTries) {
						clearInterval(checkInterval);
						console.warn('编辑器未能及时准备好，放弃设置内容');
						this.showToast('编辑器加载异常，可能无法显示完整内容');
					}
				}, 300);
			},
			
			// 设置编辑器内容
			_setEditorContent() {
				console.log('设置编辑器内容...');
				if (!this.editorCtx) {
					console.error('编辑器上下文不存在');
					return;
				}
				
				// 微信小程序中可能需要确保内容格式正确
				let content = this.formData.content || '';
				// 确保内容是有效的HTML
				if (!content.trim().startsWith('<')) {
					content = `<p>${content}</p>`;
				}
				
				try {
					// 使用延时确保UI更新完成
					setTimeout(() => {
						this.editorCtx.setContents({
							html: content,
							success: () => {
								console.log('编辑器内容设置成功');
							},
							fail: (err) => {
								console.error('编辑器内容设置失败:', err);
								// 重试一次
								setTimeout(() => {
									console.log('尝试再次设置编辑器内容...');
									this.editorCtx.setContents({
										html: content,
										fail: (retryErr) => {
											console.error('再次设置编辑器内容失败:', retryErr);
											this.showToast('内容加载失败，可能需要手动输入');
										}
									});
								}, 500);
							}
						});
					}, 300);
				} catch (error) {
					console.error('设置编辑器内容出错:', error);
				}
			},
			
			// 从URL获取文件名
			getFileNameFromUrl(url) {
				if (!url) return '';
				const parts = url.split('/');
				const lastPart = parts[parts.length - 1];
				const fileNameParts = lastPart.split('?');
				return decodeURIComponent(fileNameParts[0]);
			},
			
			// 表单提交
			async submitForm() {
				// 表单验证
				if (!this.formData.title.trim()) {
					return this.showToast('请输入规则标题');
				}
				if (!this.formData.content.trim()) {
					return this.showToast('请输入规则内容');
				}
				if (!this.formData.version.trim()) {
					return this.showToast('请输入规则版本');
				}
				
				// 编辑模式下检查ID
				if (this.isEditMode && !this.ruleId) {
					console.error('编辑模式下规则ID为空');
					return this.showToast('规则ID无效，无法更新');
				}
				
				// 处理标签
				let tags = [];
				if (this.formData.tags.trim()) {
					tags = this.formData.tags.split(',').map(tag => tag.trim()).filter(tag => tag);
				}
				
				// 设置提交状态
				this.submitting = true;
				
				// 定义变量在外层作用域
				let userInfo = {};
				let userId = '';
				let token = '';
				
				try {
					// 只上传文档到云存储
					const documentFileID = this.formData.document_url ? await this.uploadFile({
						tempUrl: this.formData.document_url,
						fileType: 'document',
						name: this.documentName
					}) : '';
					
					// 获取用户信息
					try {
						const userInfoStr = uni.getStorageSync('userInfo');
						if (userInfoStr) {
							userInfo = JSON.parse(userInfoStr);
						}
						
						// 统一的token获取方式，按优先级尝试
						token = userInfo.token || 
								uni.getStorageSync('user_token') || 
								uni.getStorageSync('uni_id_token') || 
								uni.getStorageSync('token') || '';
						
						// 统一的用户ID获取方式
						userId = userInfo._id || 
								userInfo.userId || 
								userInfo.id || 
								uni.getStorageSync('userId') || '';
						
						// 更新userInfo对象
						userInfo.token = token;
						userInfo._id = userId;
						userInfo.userId = userId;
						
						// 验证是否有可用的用户ID和token
						if (!userId) {
							this.submitting = false;
							return this.showToast('未能获取用户ID，请重新登录后再试');
						}
						
						if (!token) {
							console.warn('缺少用户token，可能会导致授权问题');
							this.submitting = false;
							return this.showToast('缺少用户token，请重新登录后再试');
						}
						
						console.log('用户信息验证通过:', {
							userId: userId,
							hasToken: !!token,
							role: userInfo.role
						});
						
					} catch (error) {
						console.error('获取用户信息失败:', error);
						this.submitting = false;
						return this.showToast('获取用户信息失败，请重新登录');
					}
					
					// 准备提交的数据
					const submitData = {
						title: this.formData.title,
						content: this.formData.content,
						category: this.formData.category,
						subcategory: this.formData.subcategory,
						tags: tags,
						version: this.formData.version,
						language: this.formData.language,
						userId: userId, // 使用外层作用域的变量
						token: token, // 使用外层作用域的变量
						documentFileID: documentFileID,
						// 添加完整的用户信息作为备份
						userInfo: userInfo
					};
					
					// 编辑模式下添加规则ID
					if (this.isEditMode) {
						if (!this.ruleId) {
							this.submitting = false;
							console.error('提交时规则ID为空');
							return this.showToast('规则ID无效，无法更新');
						}
						
						submitData.ruleId = this.ruleId;
						console.log('更新模式，使用ID:', this.ruleId);
					}
					
					console.log('准备提交数据:', JSON.stringify(submitData));
					
									// 提交数据 - 根据模式使用不同的云对象方法
				const methodName = this.isEditMode ? 'updateRuleContent' : 'uploadRuleContent';
				console.log(`调用云对象方法: ${methodName}`);

					// 设置超时定时器
					let timeoutId = setTimeout(() => {
						if (this.submitting) {
							console.warn('云函数调用超时');
							this.submitting = false;
							uni.hideLoading();
							this.showToast('请求超时，请检查网络后重试');
						}
					}, 15000); // 15秒超时

					const learningService = uniCloud.importObject('learning-service');
					const res = await learningService[methodName](submitData);
					
					clearTimeout(timeoutId); // 清除超时定时器
					console.log(`${methodName}调用结果:`, res);
					
					if (res && res.code === 0) {
						uni.showModal({
							title: this.isEditMode ? '更新成功' : '提交成功',
							content: this.isEditMode ? '规则内容已成功更新' : '规则内容已成功上传',
							showCancel: false,
							success: () => {
								// 编辑完成后清除本地存储的ID
								if (this.isEditMode) {
									try {
										uni.removeStorageSync('edit_rule_id');
									} catch (e) {
										console.error('清除本地存储ID失败', e);
									}
									
									// 编辑模式下返回上一页
									uni.navigateBack();
								} else {
									// 上传模式下重置表单
									this.resetForm();
								}
							}
						});
					} else {
						this.showToast((res && res.message) || '提交失败，请稍后重试');
					}
					
					this.submitting = false;
				} catch (error) {
					console.error('提交规则内容失败:', error);
					this.showToast('提交规则内容失败，请稍后重试');
					this.submitting = false;
				}
			},
			
			// 重置表单
			resetForm() {
				this.formData = {
					title: '',
					content: '',
					category: '比赛规则',
					subcategory: '',
					tags: '',
					version: '',
					language: 'zh-CN',
					document_url: ''
				};
				this.categoryIndex = 0;
				this.subcategoryIndex = 0;
				this.languageIndex = 0;
				this.documentName = '';
				this.uploadStatus = {
					document: false
				};
				
				// 清空编辑器内容
				if (this.editorCtx) {
					this.editorCtx.clear();
				}
			},
			
			// 显示提示消息
			showToast(message) {
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 2000
				});
			},
			
			// 选择文档
			chooseDocument() {
				// #ifdef MP-WEIXIN
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					extension: ['pdf', 'doc', 'docx'],
					success: (res) => {
						const file = res.tempFiles[0];
						if (file.size > 10 * 1024 * 1024) { // 10MB限制
							return this.showToast('文档大小不能超过10MB');
						}
						this.documentName = file.name || '文档文件.pdf';
						this.formData.document_url = file.path;
						this.uploadStatus.document = false;
						this.showToast('已选择文档: ' + this.documentName);
					},
					fail: (err) => {
						console.error('选择文档失败:', err);
						this.showToast('选择文档失败，请重试');
					}
				});
				// #endif

				// #ifdef H5 || APP-PLUS
				uni.chooseFile({
					count: 1,
					type: 'file',
					extension: ['pdf', 'doc', 'docx'],
					success: (res) => {
						const file = res.tempFiles[0];
						if (file.size > 10 * 1024 * 1024) { // 10MB限制
							return this.showToast('文档大小不能超过10MB');
						}
						this.documentName = file.name || '文档文件.pdf';
						this.formData.document_url = file.path;
						this.uploadStatus.document = false;
						this.showToast('已选择文档: ' + this.documentName);
					},
					fail: (err) => {
						console.error('选择文档失败:', err);
						this.showToast('选择文档失败，请重试');
					}
				});
				// #endif
			},

			// 预览文档
			previewDocument() {
				if (!this.formData.document_url) {
					return this.showToast('没有可预览的文档');
				}
				
				// #ifdef MP-WEIXIN
				wx.openDocument({
					filePath: this.formData.document_url, // 文档路径
					fileType: 'pdf', // 文档类型，支持 pdf、doc、docx 等
					success: () => {
						console.log('文档打开成功');
					},
					fail: (err) => {
						console.error('文档打开失败:', err);
						this.showToast('文档打开失败');
					}
				});
				// #endif
				
				// #ifdef H5
				window.open(this.formData.document_url, '_blank');
				// #endif
				
				// #ifdef APP-PLUS
				uni.downloadFile({
					url: this.formData.document_url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: res.tempFilePath,
								success: () => {
									console.log('打开文档成功');
								},
								fail: (err) => {
									console.error('打开文档失败:', err);
									this.showToast('打开文档失败');
								}
							});
						}
					},
					fail: (err) => {
						console.error('下载文档失败:', err);
						this.showToast('下载文档失败');
					}
				});
				// #endif
			},

			// 删除文档
			removeDocument() {
				this.formData.document_url = '';
				this.documentName = '';
				this.uploadStatus.document = false;
			},

			// 上传文件到云存储
			uploadFile(file) {
				return new Promise((resolve, reject) => {
					if (file.uploaded) {
						resolve(file.url);
						return;
					}

					const filePath = file.tempUrl;
					const cloudPath = `${file.fileType}s/${new Date().getTime()}_${file.name}`;

					uni.showLoading({ title: `上传${file.fileType}中...` });

					uniCloud.uploadFile({
						filePath: filePath,
						cloudPath: cloudPath,
						onUploadProgress: (progressEvent) => {
							const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
							uni.showLoading({
								title: `上传中...${percentCompleted}%`
							});
						},
						success: (res) => {
							file.url = res.fileID;
							file.uploaded = true;
							resolve(res.fileID);
						},
						fail: (err) => {
							console.error(`${file.fileType}上传失败`, err);
							reject(err);
						},
						complete: () => {
							uni.hideLoading();
						}
					});
				});
			},
			
			// 切换全屏模式
			toggleFullScreen() {
				this.isFullScreen = !this.isFullScreen;
				
				// 在状态改变后，需要重新获取编辑器上下文并调整内边距
				setTimeout(() => {
					this.onEditorReady();
					this.adjustEditorPadding();
				}, 300);
			},
			
			// 调整编辑器内边距以避免工具栏遮挡
			adjustEditorPadding() {
				if (!this.isFullScreen) return;
				
				// 获取工具栏元素
				const query = uni.createSelectorQuery();
				query.select('.editor-toolbar').boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						const toolbarHeight = res[0].height;
						console.log('工具栏实际高度:', toolbarHeight);
						
						// 为编辑器内容添加适当的顶部内边距，加上额外的20px作为缓冲
						const padding = toolbarHeight + 40;
						
						// 获取编辑器元素并设置内边距
						// #ifdef H5
						// 在H5环境下使用DOM API
						const editorElement = document.getElementById('editor');
						if (editorElement) {
							editorElement.style.paddingTop = padding + 'px';
							console.log('已为编辑器设置顶部内边距(H5):', padding + 'px');
						}
						
						// 同时使用CSS变量存储工具栏高度，用于全局样式调整
						document.documentElement.style.setProperty('--toolbar-height', padding + 'px');
						// #endif
						
						// #ifdef MP-WEIXIN
						// 在微信小程序中通过editor上下文设置样式
						if (this.editorCtx) {
							// 尝试通过更新编辑器内容来应用padding
							const currentContent = this.formData.content || '<p></p>';
							
							// 创建带有padding样式的容器
							const styledContent = `<div style="padding-top:${padding}px;">${currentContent}</div>`;
							
							this.editorCtx.setContents({
								html: styledContent,
								success: () => {
									console.log('已为编辑器设置顶部内边距(微信小程序):', padding + 'px');
								},
								fail: (err) => {
									console.error('设置编辑器内边距失败:', err);
								}
							});
						}
						// #endif
					}
				});
			},
			
			// 监听点击事件，关闭弹出菜单
			handleClickOutside(event) {
				// #ifdef H5
				// 判断点击是否在下拉菜单外部
				const isOutsideFontSize = !event.target.closest('.toolbar-dropdown');
				
				if (isOutsideFontSize && this.showFontSizeSelector) {
					this.showFontSizeSelector = false;
				}
				
				if (isOutsideFontSize && this.showColorSelector) {
					this.showColorSelector = false;
				}
				// #endif
			},
			
			// 处理窗口大小变化
			handleWindowResize() {
				// 如果处于全屏模式，重新调整内边距
				if (this.isFullScreen) {
					// 延迟调用，确保DOM已更新
					setTimeout(() => {
						this.adjustEditorPadding();
					}, 200);
				}
			},
			
			// 删除的图像相关方法的空实现，防止引用错误
			chooseImage() {
				// 保留方法体，但不执行任何操作
				console.log('图片上传功能已禁用');
				this.showToast('图片上传功能已禁用');
			},

			removeImage() {
				// 保留方法体，但不执行任何操作
				console.log('图片删除功能已禁用');
			},

			previewImage() {
				// 保留方法体，但不执行任何操作
				console.log('图片预览功能已禁用');
			},

			editVideo(video) {
				if (!video || !video._id) {
					uni.showToast({
						title: '无效的视频ID',
						icon: 'none'
					});
					return;
				}
				
				console.log('准备编辑视频, ID:', video._id);
				
				// 将ID保存到本地存储，以防页面跳转过程中参数丢失
				uni.setStorageSync('edit_video_id', video._id);
				
				// 使用更可靠的传参方式
				const url = `/pages/admin/video-edit?id=${encodeURIComponent(video._id)}&mode=edit&t=${Date.now()}`;
				console.log('跳转URL:', url);
				
				uni.navigateTo({
					url: url,
					fail: (err) => {
						console.error('页面跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 加载二级分类数据
			async loadSubcategories(category) {
				if (!category) return;
				
				this.subcategoryOptions = [];
				this.subcategoryIndex = 0;
				
				// 显示加载提示
				uni.showLoading({
					title: '加载二级标题...'
				});
				
				// 使用learning-service云对象获取规则列表，然后从中提取二级分类
				try {
					const learningService = uniCloud.importObject('learning-service');
					const res = await learningService.getRuleList({
						category: category, // 按一级分类筛选
						page: 1,
						pageSize: 100 // 获取足够多的规则
					});
					
					uni.hideLoading();
					if (res && res.code === 0 && res.data) {
						// 从规则列表中提取所有不重复的二级分类
						const rules = res.data || [];
						const subcategories = [...new Set(rules.map(rule => rule.subcategory).filter(Boolean))];
						
						// 如果没有找到现有的二级分类，使用预定义的分类
						if (subcategories.length === 0) {
							this.setDefaultSubcategories(category);
						} else {
							this.subcategoryOptions = subcategories;
							console.log('从规则中提取的二级分类:', subcategories);
							
							// 在编辑模式下，设置正确的索引
							if (this.isEditMode && this.formData.subcategory) {
								const index = this.subcategoryOptions.indexOf(this.formData.subcategory);
								this.subcategoryIndex = index !== -1 ? index : 0;
							}
						}
					} else {
						console.error('获取规则列表失败:', res);
						this.setDefaultSubcategories(category);
					}
				} catch (err) {
					uni.hideLoading();
					console.error('获取规则列表失败:', err);
					this.setDefaultSubcategories(category);
				}
			},
			
			// 设置默认的二级分类
			setDefaultSubcategories(category) {
				// 根据一级分类设置不同的默认二级分类
				switch(category) {
					case '比赛规则':
						this.subcategoryOptions = ['规则一：球场', '规则二：球', '规则三：队员', '规则四：装备', '规则五：裁判员'];
						break;
					case '裁判指南':
						this.subcategoryOptions = ['手势信号', '裁判站位', '比赛控制', '判罚标准', '沟通技巧'];
						break;
					case '技术指导':
						this.subcategoryOptions = ['视频助理裁判', '判罚技术', '特殊情况处理', '新规则解读', '实战演练'];
						break;
					case '其他':
						this.subcategoryOptions = ['常见问题', '案例分析', '规则变更', '竞赛组织'];
						break;
					default:
						this.subcategoryOptions = [];
				}
				
				console.log('使用默认二级分类:', this.subcategoryOptions);
				
				// 显示提示
				uni.showToast({
					title: '已加载默认二级标题',
					icon: 'none',
					duration: 2000
				});
				
				// 在编辑模式下，设置正确的索引
				if (this.isEditMode && this.formData.subcategory) {
					const index = this.subcategoryOptions.indexOf(this.formData.subcategory);
					this.subcategoryIndex = index !== -1 ? index : 0;
				}
			},
			
			// 加载分类数据
			loadCategories() {
				// 默认一级分类已在data中定义
				// 无论是否为编辑模式，都加载对应的二级分类
				this.loadSubcategories(this.formData.category);
			},
			
			// 绑定二级分类变化
			bindSubcategoryChange(e) {
				this.subcategoryIndex = e.detail.value;
				this.formData.subcategory = this.subcategoryOptions[this.subcategoryIndex];
				
				// 当选择已有的二级分类时，清空三级分类，因为这是该规则的特定分类
				this.formData.tertiarycategory = '';
			},
			
			// 加载规则数据
			loadRuleData() {
				// 检查规则ID是否有效
				if (!this.ruleId) {
					this.showToast('规则ID无效，无法加载');
					this.isEditMode = false;
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					return;
				}
				
				// 修改loadRuleDetail完成后的回调，添加加载分类数据的逻辑
				this.loadRuleDetail().then(() => {
					// 加载分类数据
					this.loadCategories();
				}).catch(error => {
					console.error('加载规则数据失败:', error);
				});
			},
			
			// 打开全屏编辑器
			openFullscreenEditor() {
				// 保存当前内容到缓存
				if (this.formData.content || this.formData.contentDelta) {
					try {
						const contentData = {
							html: this.formData.content,
							delta: this.formData.contentDelta
						};
						uni.setStorageSync('rich_text_editor_content', JSON.stringify(contentData));
					} catch (e) {
						console.error('保存内容到缓存失败', e);
					}
				}
				
				// 跳转到富文本编辑器页面
				uni.navigateTo({
					url: `/packageadmin/admin/rich-text-editor?title=${encodeURIComponent('编辑规则内容')}&placeholder=${encodeURIComponent('请输入规则详细内容（支持丰富的文字排版和图片）')}&mode=fullscreen`
				});
			},
			
			// 接收富文本编辑器返回的内容
			onRichTextEditorComplete(contentData) {
				console.log('接收到编辑器返回内容');
				if (contentData.html) {
					this.formData.content = contentData.html;
					// 将内容同步到编辑器
					if (this.editorCtx) {
						this.editorCtx.setContents({
							html: contentData.html,
							success: () => {
								console.log('同步编辑器内容成功');
							},
							fail: (err) => {
								console.error('同步编辑器内容失败:', err);
							}
						});
					}
				}
				
				// 保存Delta格式
				if (contentData.delta) {
					this.formData.contentDelta = contentData.delta;
				}
			}
		}
	}
</script>

<style>
	/* 设置默认的CSS变量 */
	:root {
		--toolbar-height: 90px;
	}
	
	/* 新增的输入框和选择器容器样式 */
	.picker-container {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.picker-container .form-input {
		flex: 1;
		padding-right: 50rpx; /* 为下拉箭头留出空间 */
	}
	
	.picker-container .form-picker {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 80rpx;
		z-index: 2;
		background: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.picker-arrow {
		color: #666;
		font-size: 24rpx;
	}
	
	.disabled-input {
		background-color: #f5f5f5;
		color: #333;
		text-align: left;
		display: flex;
		align-items: center;
		height: 80rpx;
		padding-left: 20rpx;
	}
	
	/* 全屏模式下的编辑器 */
	.editor-container.fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		border-radius: 0;
		margin: 0;
		padding: 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}
	
	/* 工具栏样式 */
	.editor-toolbar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 12rpx;
		background-color: #f8f8f8;
		border-bottom: 1px solid #eee;
		position: sticky;
		top: 0;
		z-index: 10;
		gap: 12rpx; /* 统一按钮间距 */
	}
	
	/* 全屏模式下的工具栏 */
	.fullscreen .editor-toolbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10000;
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	}
	
	/* 编辑器内容区域 */
	.editor {
		width: 100%;
		height: 400rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		line-height: 1.5;
		background-color: #ffffff;
		transition: all 0.3s;
	}
	
	/* 全屏模式下的编辑器 */
	.fullscreen .editor {
		flex: 1;
		height: auto !important; /* 覆盖默认高度 */
		min-height: calc(100vh - var(--toolbar-height)); /* 使用CSS变量 */
		width: 100%;
		box-sizing: border-box;
		padding-top: var(--toolbar-height) !important; /* 使用CSS变量并强制应用 */
	}
	
	.preview-btn, .image-btn {
		margin: 0 10rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
	}

	.play-btn {
		background-color: #1BAE76;
		color: #fff;
	}

	.delete-btn {
		background-color: #ff4d4f;
		color: #fff;
	}

	.preview-name {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.preview-image {
		width: 100%;
		height: 200rpx;
		border-radius: 8rpx;
	}

	/* 富文本编辑器样式 */
	.editor-container {
		width: 100%;
		border: 1px solid #ccc;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		position: relative;
		transition: all 0.3s;
	}
	
	/* 全屏模式样式 */
	.editor-container.fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		border-radius: 0;
		margin: 0;
		padding: 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}
	
	/* 工具栏样式 */
	.editor-toolbar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 12rpx;
		background-color: #f8f8f8;
		border-bottom: 1px solid #eee;
		position: sticky;
		top: 0;
		z-index: 10;
		gap: 12rpx; /* 统一按钮间距 */
	}
	
	/* 全屏模式下的工具栏 */
	.fullscreen .editor-toolbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10000;
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	}
	
	/* 工具栏按钮 */
	.toolbar-btn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 6rpx;
		border: 1px solid #ddd;
		transition: all 0.2s;
	}
	
	.toolbar-btn:active {
		background-color: #f0f0f0;
	}
	
	.toolbar-btn.active {
		background-color: #1BAE76;
		color: #fff;
		border-color: #1BAE76;
	}
	
	.toolbar-icon {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	/* 编辑器内容区域 */
	.editor {
		width: 100%;
		height: 400rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		line-height: 1.5;
		background-color: #ffffff;
		transition: all 0.3s;
	}
	
	/* 全屏模式下的编辑器 */
	.fullscreen .editor {
		flex: 1;
		height: auto !important; /* 覆盖默认高度 */
		min-height: calc(100vh - var(--toolbar-height)); /* 使用CSS变量 */
		width: 100%;
		box-sizing: border-box;
		padding-top: var(--toolbar-height) !important; /* 使用CSS变量并强制应用 */
	}
	
	/* 全屏模式下的编辑器内容 */
	.fullscreen-editor {
		padding-top: 100rpx !important; /* 强制添加顶部内边距，避免被工具栏遮挡 */
	}
	
	/* 下拉菜单样式 */
	.toolbar-dropdown {
		position: relative;
	}
	
	.dropdown-toggle {
		display: flex;
		align-items: center;
	}
	
	.dropdown-arrow {
		font-size: 16rpx;
		margin-left: 4rpx;
	}
	
	.dropdown-menu {
		position: absolute;
		top: 76rpx; /* 调整下拉菜单位置 */
		left: 0;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 6rpx;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		z-index: 100;
		min-width: 120rpx;
	}
	
	.dropdown-item {
		padding: 12rpx 20rpx;
		font-size: 26rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.dropdown-item:last-child {
		border-bottom: none;
	}
	
	.dropdown-item:active {
		background-color: #f5f5f5;
	}
	
	/* 颜色选择器 */
	.color-menu {
		width: 200rpx;
		padding: 12rpx;
	}
	
	.color-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 8rpx;
	}
	
	.color-item {
		width: 40rpx;
		height: 40rpx;
		border: 1px solid #ddd;
		border-radius: 4rpx;
		cursor: pointer;
	}
	
	/* 对齐方式图标 */
	.align-icon {
		width: 32rpx;
		height: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 4rpx 0;
	}
	
	.align-line {
		height: 2rpx;
		background-color: #333;
		width: 100%;
	}
	
	.full-line {
		width: 100%;
	}
	
	/* 左对齐样式 - 第二条线短一半 */
	.left-line {
		width: 50%;
	}
	
	/* 居中样式 - 所有线短一半居中 */
	.center-line {
		width: 50%;
		margin: 0 auto;
	}
	
	/* 右对齐样式 - 第二条线短一半靠右 */
	.right-line {
		width: 50%;
		margin-left: auto;
	}
	
	/* 项目符号图标 */
	.bullet-icon {
		width: 32rpx;
		height: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 2rpx 0;
	}
	
	.bullet-item {
		display: flex;
		align-items: center;
	}
	
	.bullet-dot {
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		background-color: #333;
		margin-right: 4rpx;
	}
	
	.bullet-line {
		height: 2rpx;
		background-color: #333;
		flex: 1;
	}
	
	/* 活跃状态下的图标颜色 */
	.toolbar-btn.active .align-line,
	.toolbar-btn.active .bullet-dot,
	.toolbar-btn.active .bullet-line {
		background-color: #fff;
	}
	
	/* 文字颜色图标 */
	.font-color-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	
	.font-color-icon text {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.font-color-icon .underline {
		width: 20rpx;
		height: 3rpx;
		position: absolute;
		bottom: -3rpx;
	}
	
	/* 全屏按钮 */
	.fullscreen-btn {
		width: auto;
		padding: 0 16rpx;
	}
	
	.fullscreen-text {
		font-size: 24rpx;
	}
	
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.form-picker {
		flex: 1;
		background-color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
	}
	
	.picker-value {
		color: #333;
	}
	
	.picker-placeholder {
		color: #999;
	}
	
	/* 颜色选择器 */
	.color-icon {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 1px solid #ddd;
	}
</style> 